<!-- 地市项目批复汇总 -->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <span style="color: rgb(14, 175, 14);">地市项目批复汇总</span>
      </div>
      <div class="topInfo">
        <h4>全区总规模：<span>4360万千瓦</span></h4>
        <div class="subTitle">
          <p>光伏治沙项目容量：<span>2860万千瓦</span></p>
          <p style="margin-top: 10px;">风电：<span>1500万千瓦</span></p>
        </div>
      </div>
      <div id="Chart1" style="margin-top:20px;width: 100%;height:480px;"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: undefined,
      data1: [
        {name: '鄂尔多斯', value: 2024, unit:'内蒙古能源集团有限责任公司', area: 195},
        {name: '兴安盟', value: 60, unit:'中广核新能源内蒙古分公司', area: 8},
        {name: '巴彦淖尔市', value: 1590, unit:'华能乌拉特中旗新能源发电有限公司', area: 33.28},
        {name: '乌兰察布', value: 300, unit:'大唐（内蒙古）能源开发有限公司', area: 44},
        {name: '赤峰市', value: 400, unit:'国家能源集团龙源电力', area: 23.07},
        {name: '通辽市', value: 350, unit:'国家电力投资集团有限公司', area: 51.6},
        {name: '阿拉善盟', value: 410, unit:'内蒙古华腾公司', area: 59.96},
        {name: '阿拉善盟', value: 890, unit:'内蒙古华腾公司', area: 142.8},
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('Chart1')
      this.chart = echarts.init(ctx)

      let option = {
        tooltip: {
            backgroundColor: '#fff',
            extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
            padding: [12, 16, 12, 16],
            textStyle: {
              color: 'rgba(0,0,0,0.65)'
            },
            // 悬浮的位置可以调整，总距离左边10px
            position: (point) => {
              return ['10', point[1]]
            },
            formatter: (param) => {
              let {marker, name, value, data} = param
              let result = `<div>${marker}${name}</div>`
              result += `<div>牵头单位：${data.unit}</div>`
              result += `<div>装机规模：${data.value} 万千亩</div>`
              result += `<div>治理面积：${data.area} 次</div>`
              return result
            }
        },
        legend: {
            // orient: 'vertial',
            itemWidth: 20,
            itemHeight: 8,
            center: 0,
            bottom: 20,
            data: this.data1,
            textStyle: {
              fontSize: 14,
              color: 'rgba(0,0,0,0.65)'
            },
            formatter: (name) => {
              const value = this.data1.find(item => item.name === name).value
              // return `${name}：${value} 次`
              return name
            }
        },
        color: ['green', 'lightGreen', '#9bd08c', '#abd79e', '#01C581', '#a9c94b', '#FCDA0F', '#9B501B', '#A0D911', '#2998FF', '#938BF8'],
        series: [{
            name: '攻击总数',
            type: 'pie',
            radius: ['80%', '40%'],
            center: ['50%', '40%'], // 图形位置
            label: { // 鼠标悬浮具体数据显示
              show: false
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: this.data1
        }]
      };
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
  width: 100%;
  .topInfo {
    h4 {
      margin: 0;
      font-size: 18px;
      span {
        font-size: 20px;
        color: green;
      }
    }
    .subTitle {
      margin-top: 22px;
      p {
        margin: 0;
        font-size: 14px;
      }
      span {
        color: green;
      }
    }
  }
}
</style>